<template>
	<view class="LandMap" :style="viewer">
		<!-- 绘制容器 -->
		<scroll-view class="LandMap-view" :scroll-top="background.top" :scroll-left="background.left"
			:scroll-x="background.scrollX" :scroll-y="background.scrollY" @scroll="onScroll">
			<!-- 选中背景&遮罩 -->
			<view :style="background.mainStyles">
				<image :src="background.src" :style="background.nodeStyles"/>
				<canvas canvas-id="mainer" :style="background.nodeStyles" @click="onStage" />
			</view>
		</scroll-view>
		<!-- 启动引导 -->
		<view :class="`LandMap-guide ${guide.step}`" v-if="guide.show" @click="onGuide">
			<view class="LandMap-guide--icon"></view>
			<text class="LandMap-guide--text">{{guide.desc}}</text>
		</view>
		<!-- 选中土地（必须使用cover-view具体参考原生组件https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html） -->
		<cover-view class="LandMap-stage" :style="land.styles">{{ land.info.name }}</cover-view>
	</view>
	
</template>

<script>
	import Logic from './landmap/Logic.js';
	import Project from './landmap/data.js';
	export default {
		data() {
			return {
				logic: null,
				// @引导
				guide: {
					show: true,
					step: 'move-animation',
					desc: '滑动地图 查看农田',
				},
				// @容器
				viewer: {
					width: '0px',
					height: '0px',
				},
				// @偏移
				offset: {
					top: 0,
					left: 0,
				},
				// @背景
				background: {
					src: '',
					top: 0,
					left: 0,
					scrollX: true,
					scrollY: true,
					mainStyles: {
						position: 'relative',
						width: '0px',
						height: '0px',
					},
					nodeStyles: {
						position: 'absolute',
						top: '0px',
						left: '0px',
						width: '0px',
						height: '0px',
					}
				},
				// @土地
				land: {
					show: false,
					info: {
						name: '我是土地#1'
					},
					styles: {
						display: 'none',
						top: '0px',
						left: '0px'
					},
				},
			};
		},

		mounted() {
			// 获取当前大小
			const info = uni.getSystemInfoSync();
			// 创建渲染逻辑
			this.viewer.width = `${info.screenWidth}px`;
			this.viewer.height = `${info.screenHeight}px`;
			this.logic = new Logic({
				mainer: uni.createCanvasContext('mainer'),
				viewer: {
					width: info.screenWidth,
					height: info.screenHeight,
				}
			});
			// 更新背景事件
			this.logic.addListener('loaded', (background) => {
				// 设置背景图片
				this.background.src = background.src;
				// 设置当前偏移
				this.offset.top = background.top;
				this.offset.left = background.left;
				// 设置背景大小
				this.background.mainStyles.width = `${background.width}px`;
				this.background.mainStyles.height = `${background.height}px`;
				this.background.nodeStyles.width = `${background.width}px`;
				this.background.nodeStyles.height = `${background.height}px`;
				// 首次运行动画
				this.$nextTick(() => setTimeout(() => {
					// 更新滚动偏移
					this.background.top = background.top;
					this.background.left = background.left;
					// 等待 3s 后变换动画
					setTimeout(() => {
						this.guide.step = 'hold-animation';
						this.guide.desc = '点击农田 开始认养';
					}, 2000);
				}, 300));
			})
			// 点击区域事件
			this.logic.addListener('stage', ({ stage, left, top }) => {
				if (stage) {
					// 展示选中
					this.land.info = stage;
					this.land.show = true;
					this.land.styles.display = 'block';
					this.land.styles.top = top ? 'auto' : '80px';
					this.land.styles.bottom = top ? '20px' : 'auto';
					this.land.styles.left = left ? 'auto' : '20px';
					this.land.styles.right = left ? '20px' : 'auto';
					// console.log('确认点击', stage.code);
				} else {
					// 隐藏选中
					this.land.show = true;
					this.land.styles.display = 'none';
					// console.log('取消点击');
				}
				// 选中时候禁用滚动条, 否则开启
				this.background.scrollX = !stage;
				this.background.scrollY = !stage;
			});
			// 加载项目数据
			this.logic.load(Project);
		},

		unmounted() {
			this.logic && this.logic.destroy();
		},

		methods: {
			/** @事件 点击引导 */
			onGuide() {
				this.guide.show = false;
			},
			
			/** @事件 滚动事件 */
			onScroll(e) {
				this.offset.top = e.detail.scrollTop;
				this.offset.left = e.detail.scrollLeft;
				console.log('------ Scroll', this.offset);
			},

			/** @事件 点击地块 */
			onStage(e) {
				const { offset } = this;
				const touch = e.touches ? e.touches[0] : e.changedTouches ? e.changedTouches[0] : e;
				touch.x = touch.clientX || touch.x;
				touch.y = touch.clientY || touch.y;
				this.logic.dispatch('click', touch, offset);
			},
		},
	}
</script>

<style>
	.LandMap {
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: relative;
		white-space: nowrap;
		user-select: none;
	}

	.LandMap-view {
		width: 100%;
		height: 100%;
	}
	
	.LandMap-stage {
		background-color: #97ed97;
		text-align: center;
		position: absolute;
		left: 0;
		top: 0;
		width: 180rpx;
		height: 200px;
		padding: 30rpx;
		border-radius: 12rpx;
		font-size: 60rpx;
		z-index: 900;
	}
	
	.LandMap-guide {
		background-color: rgba(0, 0, 0, 0.3);
		position: absolute;
		height: 100%;
		width: 100%;
		left: 0;
		top: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.LandMap-guide--text {
		display: block;
		text-align: center;
		font-size: 38rpx;
		font-weight: 500;
		color: #fff;
	}
	
	.LandMap-guide--icon {
		margin-bottom: 18rpx;
	}
	
	.hold-animation .LandMap-guide--icon {
		width: 80rpx;
		height: 80rpx;
		background: url('../../static/hold.png') no-repeat center; background-size: 100% 100%;
		animation: hold 1.3s ease-in-out infinite;
	}
	
	.move-animation .LandMap-guide--icon {
		width: 80rpx;
		height: 80rpx;
		background: url('../../static/move.png') no-repeat center; background-size: 100% 100%;
		animation: move 1.3s ease-in-out infinite;
	}
	
	@keyframes hold {
	  0% {
		opacity: 1;
		transform: scale(1.1);
	  }
	  20% {
	    opacity: 0.8;
	    transform: scale(0.6);
	  }
	  66%, 100% {
	  	opacity: 1;
	    transform: scale(1);
	  }
	}
	
	@keyframes move {
	  0% {
		opacity: 0.5;
	    transform: translateX(-30rpx);
	  }
	  66%, 100% {
	  	opacity: 1;
	    transform: translateX(0rpx);
	  }
	}
</style>